<template>
	<div>
		<div class="wrapper"></div>
		<div class="login-outer">
			<div class="login-box">
				<transition name="component-fade" mode="out-in">
					<div v-if="isLogin" key="login">
						<el-row style="font-size: 24px;font-weight: 700;margin-top: 20px;color: rgba(0, 0, 0, .87)">登录</el-row>
						<el-row style="font-size: 13px;color: rgba(0, 0, 0, .56);margin-top: 3px">继续到 工程实践教学平台</el-row>
						<el-form :model="loginForm" status-icon :rules="rules" ref="loginForm">
							<el-form-item style="margin-top: 30px" prop="username">
								<el-input class="login-input" placeholder="请输入账号" v-model="loginForm.username"/>
							</el-form-item>
							<el-form-item style="margin-top: 20px" prop="password">
								<el-input class="login-input" placeholder="请输入密码" v-model="loginForm.password" type="password"/>
							</el-form-item>
						</el-form>
						<div class="login-box-btn">
							<el-button type="info" style="border-radius: 3px" @click="change">修改密码</el-button>
							<el-button type="primary" style="border-radius: 3px" @click="handleLogin" v-loading="loading">登录 工程实践教学平台</el-button>
						</div>
					</div>
					<div v-else key="register">
						<el-row style="font-size: 24px;font-weight: 700;margin-top: 20px;color: rgba(0, 0, 0, .87)">修改密码</el-row>
						<el-row style="font-size: 13px;color: rgba(0, 0, 0, .56);margin-top: 3px">继续到 工程实践教学平台</el-row>
						<el-form :model="registerForm" status-icon :rules="rules" ref="registerForm">
							<el-form-item style="margin-top: 30px" prop="username">
								<el-input class="login-input" ref="username" placeholder="请输入账号" v-model="registerForm.username"/>
							</el-form-item>
							<el-form-item style="margin-top: 20px" prop="password">
								<el-input class="login-input" ref="password" placeholder="请输入新密码" v-model="registerForm.password" type="password"/>
							</el-form-item>
							<el-form-item style="margin-top: 20px" prop="conformPassword">
								<el-input class="login-input" ref="conformPassword" placeholder="请确认新密码" v-model="conformPassword" type="password"/>
							</el-form-item>
						</el-form>
						<div class="login-box-btn">
							<el-button type="info" style="border-radius: 3px" @click="change">登录</el-button>
							<el-button type="primary" style="border-radius: 3px" @click="handRegister" v-loading="loading">确认修改</el-button>
						</div>
					</div>
				</transition>
			</div>
		</div>
	</div>
</template>

<script>
  import * as login from '@/api/login';
  import rules from '@/utils/formRules';
  import user from '@/api/user';
  import Cookie from 'js-cookie'

  export default {
    name: 'login',
		data() {
      return {
        rules: rules.loginForm,
        isLogin: true,
        loading: false,
        loginForm: {
          username: '',
          password: '',
				},
        registerForm: {
          username: '',
          password: '',
				},
				conformPassword: '',
        isShowPassword: false,
			}
		},
		methods: {
      change() {
        this.$nextTick(() => {
          this.isLogin = !this.isLogin;
          if (this.isLogin) {
            this.$refs['registerForm'].resetFields();
          } else {
            this.$refs['loginForm'].resetFields();
          }
				})
			},
      async handRegister() {
        try {
          await this.$refs.registerForm.validate(async valid => {
						console.log(valid)
            if (valid) {
              if (this.conformPassword === this.registerForm.password) {
								this.loading = true;
								const res = await login.register(this.registerForm);
								this.change();
								if (res.msg === '修改密码成功') {
									this.change();
									this.conformPassword = ''
									this.$notify({
										title: '信息',
										message: '修改成功',
										type: 'success'
									})
								} else {
									this.$notify({
										title: '错误',
										message: '修改失败',
										type: 'error'
									})
								}
							} else {
								this.$notify({
										title: '错误',
										message: '请确保两次输入密码一致',
										type: 'error'
									})
							}
						}
					})
        } catch (e) {
					console.log(e);
        } finally {
					this.loading = false;
        }
			},
      async handleLogin() {
        try {
          await this.$refs.loginForm.validate(async valid => {
            if (valid) {
              this.loading = true;
              await this.$store.dispatch('user/login', this.loginForm);
              let res = JSON.parse(Cookie.get("userInfo"));
              console.log(res)
              this.loginForm.password = '';
						}
					})

        } catch (e) {
					console.log(e);
        } finally {
					this.loading = false;
        }
			}
		},
    mounted() {
      // if (this.loginForm.username === '') {
      //   this.$refs.username.focus()
      // } else if (this.loginForm.password === '') {
      //   this.$refs.password.focus()
      // }
    },
		created () {
      this.loginForm = {
        username: '',
				password: '',
      }
      this.registerForm = {
        username: '',
				password: '',
      }
		}
  }
</script>

<style scoped>
	.login-box-btn {
		position: absolute;
		bottom: 44px;
		right: 44px;
	}
	.wrapper {
		position: fixed;
		filter: brightness(50%);
		background-image: url("../../assets/img/loginbg.jpg");
		height: 100vh;
		width: 100vw;
		z-index: 1;
	}
	.login-outer {
		background-color: rgba(0,0,0,0);
		display: flex;
		width: 100vw;
		height: 100vh;
	}
	.login-box {
		position: relative;
		background-color: #ffffff;
		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
		margin: auto;
		width: 440px;
		height: 352px;
		z-index: 999;
		border-radius: 3px;
		padding: 44px;
	}
	.login-input >>> input{
		border-top: none;
		border-left: none;
		border-right: none;
		border-radius: 0;
		padding: 0;
		width: 100%;
	}
	.component-fade-enter-active, .component-fade-leave-active {
		transition: opacity .2s ease;
	}
	.component-fade-enter, .component-fade-leave-to
		/* .component-fade-leave-active for below version 2.1.8 */ {
		opacity: 0;
	}
</style>